<template>
  <div id="home">
      <div v-if="!showLoading">
          <Header/>
          <!--轮播图-->
          <Sowing :sowing_list="sowing_list"/>
          <!--导航-->
          <Nav :nav_list="nav_list" />
          <!--秒杀-->
          <FlashSale :flash_sale_product_list="flash_sale_product_list"/>
          <!--猜你喜欢-->
          <YouLike :you_like_list="you_like_list"/>
          <!--返回到顶部-->
          <MarkPage v-if="showBackStatus" :scrollToTop="scrollToTop"/>
      </div>
      <van-loading
              v-else
              type="spinner"
              color="#75a342"
              class="loading"
      >春城正在加载中。。。</van-loading>
  </div>
</template>

<script>
//1.引入
import {getHomeData} from './../../service/api/index'

//2.引入组件
import Header from './components/header/Header'
import Sowing from './components/sowing/Sowing'
import Nav from './components/nav/Nav'
import FlashSale from './components/flashSale/FlashSale'
import YouLike from './components/youLike/YouLike'
import MarkPage from './components/markPage/MarkPage'

//3.引入处理返回顶部对的函数
import {showBack,animate} from '@/config/global'

//4.引入通知插件
import Pubsub from 'pubsub-js';
import { Toast } from 'vant';

//5.引入Vuex
import {mapMutations,mapState} from 'vuex'

//6.引入购物车接口
import {addGoodsToCart} from './../../service/api/index'

export default {
    name:'Home',
    data(){
        return {
            //轮播图
            sowing_list:[],
            //导航
            nav_list:[],
            //秒杀数据
            flash_sale_product_list:[],
            //猜你喜欢
            you_like_list:[],
            //加载中图标
            showLoading:true,
            //是否显示返回顶部的按钮
            showBackStatus:false,
        }
    },
    components:{
        Header,
        Sowing,
        Nav,
        FlashSale,
        YouLike,
        MarkPage
    },
    computed:{
        ...mapState(['userInfo'])
    },
     methods:{
         ...mapMutations(["ADD_GOODS"]),
          scrollToTop(){
            let docB = document.documentElement || document.body
            animate(docB,{scrollTop:'0'},400,'ease-out')
          },
          async reqData(){
             let res =  await getHomeData()
             if(res.success){
                 this.sowing_list = res.data.list[0].icon_list
                 this.nav_list = res.data.list[2].icon_list
                 this.flash_sale_product_list =  res.data.list[3].product_list
                 this.you_like_list =  res.data.list[12].product_list
                 //隐藏loading
                 this.showLoading = false

                 //开始监听滚动，到达指定位置显示返回顶部
                 showBack((status)=>{
                     this.showBackStatus = status
                 });
             }
         },

          //2. 添加商品到购物车
          async dealGoodsAdd(goods){
              let result =await addGoodsToCart(this.userInfo.token,goods.id,goods.name,goods.price,goods.small_image)
              if(result.success_code === 200){
                  this.ADD_GOODS({
                      goodsId:goods.id,
                      goodsName:goods.name,
                      smallimage:goods.small_image,
                      goodsPrice:goods.price
                  });
                  //提示用户
                  Toast({
                      message:'添加到购物车成功',
                      duration:800
                  })
              }
          }
     },
    created() {
        //请求主页数据
        this.reqData()
    },
    mounted(){
        //订阅消息（添加到购物车的消息）
        Pubsub.subscribe('homeAddToCart',(msg,goods)=>{
            if(msg==='homeAddToCart'){
                //判断用户是否登录
                if(this.userInfo.token){ //已经登录
                    this.dealGoodsAdd(goods)
                } else {
                    this.$router.push('/login')
                }
            }
        })
    }
}
</script>

<style lang="less" scoped>
    #home{
        width: 100%;
        height: 100%;
        background-color: #F5F5F5;
    }
    .loading{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%)
    }
</style>